<template>
  <div>
    <p>已完成的任务: {{todos.filter(todo => {return todo.done === true}).length}}</p>
    <p>待完成的任务: {{todos.filter(todo => {return todo.done === false}).length}}</p>
    <todo v-for="(todo, index) in todos"  v-bind:todo="todo" v-bind:index="index"></todo>
  </div>
</template>

<script type = "text/javascript" >
  import Todo from './Todo.vue'
  export default {
    props: ['todos'],
    components: {
      Todo
    }
  };
</script>

<style scoped>
  p.tasks {
    text-align: center;
  }
</style>